<template>
	<view class="content">
		
		<view class="l-body">
			<view v-if="datas.length==0" style="text-align: center;font-size: 30rpx;color: #F1F1F1;margin-top: 15rpx;">
				没有符合条件的内容。。。
			</view>
			<!-- l-madin -->
			<view class="l-main">
				<view class="l-dl" v-for="(book,i) in datas" :key="i" @tap="navtoDetail(book.Id)" @scrolltolower="scroll">
					<view>
						<image class="l-dt" :src="book.photo" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							{{book.title}}
						</view>
						<view class="l-dd-content">
							{{book.synopsis}}……
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							 -->
							<text style="font-size: 30rpx;">类型：{{book.type}}</text>
						</view>
					</view>
					
				</view>
				<view  v-if="datas.length>0"  style="text-align: center;font-size: 30rpx;color: #F1F1F1;margin-top: 15rpx;">
					已加载全部
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getNewBooks,searchBook, getClassifyBooks,getTopTenBooks,getNewBooksTwo,getMonthTop } from "../../utils/api.js"
	import { setStore, getStore } from "../../store/store.js"
	export default {
		data() {
			return {
				title: 'Hello',
				datas: [],
				page: 1,
				search_value: '',
				type: 1
			}
		},
		onLoad(option) {
			// type 1搜索，2分类，3榜单
			this.type = option.type;
			this.search_value = option.value;
			
			switch(this.type){
				case "1":
					console.log("全书搜索")
					this.search_book()
					break;
				case "2":
					console.log("图书分类")
					getClassifyBooks(this.search_value, this.page, (data) => {
						this.datas = data.data
					});
					break;
				case "3":
					console.log("获取榜单")
					getTopTenBooks(this.page, (data) => {
						console.log(data)
						this.datas = data.data
					});
					break;
				case "5":
					console.log("获取最新书籍")
					getNewBooksTwo(this.page, (data) => {
						this.datas = data.data
					});
					break;
				case "6":
					console.log("获取月榜书籍")
					getMonthTop(this.page, (data) => {
						this.datas = data.data
					});
					break;
				default:
					break;
			}
		},
		onReachBottom: function() {			
			getNewBooksTwo(this.page, (data) => {
				for (var i = 0; i < data.data.length; i++) {
					this.datas.push(data.data[i]);
				}
				this.page++;
			});
		},
		methods: {
			search_book() {
				if ( this.search_value == '' ){
					uni.showToast({
						title: '搜索内容不能为空!',
						icon: 'none'
					})
					return;
				}
				searchBook(this.search_value, (data)=>{
					this.datas = data.data;
				})
			},
			navtoDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?bookid='+id
				})
			}
		}
	}
</script>

<style>
	/* l-head */
	.l-head {
		margin-top: 15rpx;
	}

	.l-nav-bookrack {
		font-size: 30rpx;
	}


	/* l-main */

	.l-main {
		padding-bottom: 32rpx;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
</style>
